<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>01_querySelector和getxxxbyxxx的区别</title>
    </head>
    <body>
        <ul>
            <li>爱你</li>
            <li>美丽的神话</li>
            <li>死了都要爱</li>
            <li>最炫民族风</li>
        </ul>

        <script>
            // 动态 getxxxbyxxx
            var ul = document.getElementsByTagName('ul')[0];

            var li_list = document.getElementsByTagName('li');

            for(var i = 0; i < li_list.length; i++){
                ul.append(document.createElement('li'));
            }

            console.log(li_list.length);

            // 静态
            // var ul = document.querySelector('ul');

            // var li_list = document.querySelectorAll('li');


            // for(var i = 0; i < li_list.length; i++){
            //     ul.append(document.createElement('li'));
            // }
            // console.log(li_list.length);
        </script>
    </body>
</html>